<template>
	<view class="useridcomfrim-container">
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.back(1)"></view>
				<view class="header-title">{{usermsg.status ?'认证结果':'实名认证'}}</view>
			</view> 
		</view> 
		<view class="result" v-if="usermsg.status">
			<view class="img-box">
				<image v-if="usermsg.status==1" class="img" src="@/static/user/userId-in.png" mode="widthFix" />
				<image v-if="usermsg.status==2" class="img" src="@/static/user/userId-success.png" mode="widthFix" />
				<image v-if="usermsg.status==3" class="img" src="@/static/user/userId-fail.png" mode="widthFix" />
			</view>
			<view class="title">{{ getSourceType(usermsg.status) }}</view>
			<view class="p" v-if="usermsg.status==3">失败原因：{{ usermsg.reason }}</view>
			<view class="close" v-if="usermsg.status==3" @tap.stop="usermsg.status = ''">重新申请</view>
			<view class="close" v-else @tap.stop="$tools.back(1)">关闭</view>
		</view>
		<view  v-else>
		<view class="use-upload-content">
			<view class="usermsg-input">
				<view class="usermsg-input-nameblock">
					<view class="usermsg-input-nametitle">
						姓名
					</view>
					<u--input class="usernameinput" placeholder="请输入姓名" type="text" customStyle="marginRight:40rpx"
						border="none" v-model="username">
					</u--input>
				</view>
				<view class="usermsg-input-idblock">
					<view class="usermsg-input-idtitle">
						身份证号
					</view>
					<u--input class="useridinput" placeholder="请输入身份证号" customStyle="marginRight:40rpx" type="idcard"
						border="none" v-model="userid">
					</u--input>
				</view>
			</view>
			<view class="upload-box">
			<view class="user-image-upload">
				<view class="user-image-upload-title">
					身份证正面
				</view>
				<view class="upload">
					<image v-if="idcardz" :src="idcardz" class="img" />
					<image v-else src="@/static/user/idcradimage.png" class="img" mode="" @tap.stop="upload('idcardz')" />
					<image src="@/static/public/close.png" v-if="idcardz" class="close" @tap.stop="deletePic('idcardz')"/>
				</view>
				<!-- <u-upload :fileList="idcardz" @afterRead="afterRead" @delete="deletePic" name="idcardz"
					:multiple="false" :maxCount="1" width="340rpx" height="200rpx" imageMode="aspectFill">
					<image class="img" src="@/static/user/idcradimage.png" mode="widthFix" />
				</u-upload> -->
			</view>
			<view class="user-image-upload">
				<view class="user-image-upload-tips">
					身份证反面
				</view>
				<view class="upload">
					<image v-if="idcardf" :src="idcardf" class="img" />
					<image v-else src="@/static/user/idcradimage1.png" class="img" mode="" @tap.stop="upload('idcardf')" />
					<image src="@/static/public/close.png" v-if="idcardf" class="close" @tap.stop="deletePic('idcardf')"/>
				</view>
				<!-- <u-upload :fileList="idcardf" name="idcardf" @afterRead="afterRead1" @delete="deletePic1"
					:multiple="false" :maxCount="1" width="340rpx" height="200rpx" imageMode="aspectFill">
					<image class="img" src="@/static/user/idcradimage1.png" mode="widthFix" />
				</u-upload> -->
			</view>
			</view>
				<!-- <view class="useridconfrim-deal-text">
					<text>我已同意授权</text><text class="deal-text" @tap.stop="$tools.jump('/pages/agree/agree',1)">《用户协议》</text>
				</view> -->
			</view>
			<view class="usermsg-upload-btn" @tap.stop="submit">
					实名认证
				</view>
				<!-- <view class="usermsg-upload-cancel">取消</view> -->
			</view>			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				userid: '',
				idcardz: '',
				idcardf:'',
				qiniu: {},
				usermsg:{
					status:''
				}
			}
		},
		computed:{
			getSourceType(){
				return function(type){
					switch (type){
						case 1:
							return '资料审核中';
							break;
						case 2:
							return '实名认证通过';
							break;
						case 3:
							return '实名认证失败';
							break;
					}
				}
			}	
		},
		onLoad() {
			console.log("onLoad");
		},
		onShow() {
			console.log("onShow");
			this.getQiNiuToken(); // 获取七牛云token
			this.getData()
		},
		methods: {
			// 实名认证详情
			getData(){
        const data={}
        uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/user/getUserRealNameInfo',data,res => {
          uni.hideLoading();
          if (res.code == 200) {
            this.usermsg = res.data || {status:''}
          }
        }, err =>{
						uni.hideLoading();
					}, 'GET'
        )
      },
			submit() {
				var pattern = /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
				// if(this.usermsg.status !=2){
					// if (this.checked == false) {
					// 	this.msg('请勾选同意相关协议')
					// }
					if (!this.username) {
						this.$tools.toast('请输入姓名');
					}
					else if (!this.userid) {
						this.$tools.toast('请输入身份证号码');
					} 
					else if (!pattern.test(this.userid)) {
						this.$tools.toast('身份证号码有误');
					} 
					else if (!this.idcardz) {
						this.$tools.toast('请上传身份证的头像面');
					} else if (!this.idcardf) {
						this.$tools.toast('请上传身份证的国徽面');
					} 
					else {
							uni.showLoading({
									mask: true,
							});
							const data={
								name:this.username,
								idCard:this.userid,
								img1:this.idcardz,
								img2:this.idcardf
							}
							this.$Ajax('/api/user/userRealName',data, res => {
								uni.hideLoading();
								if(res.code == 200){
									this.$tools.toast('提交成功',2);
									this.getData()
								}else if(res.code == 300){
									this.$tools.toast(res.msg);
								}
							}, err => {
								uni.hideLoading();
								console.log(res);
							}, 'POST')
					}
				
				//} else{
				// 	this.msg('已通过不可提交')
				// }
			},
			changecheck(e) {
				if (e.length > 0) {
					this.checked = true
				} else {
					this.checked = false
				}
			},
			deletePic(key) {
				this[key] = ''
			},
			upload(key){
				const that = this
				uni.showLoading({
						mask: true,
				});
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						uni.hideLoading();
						let avatar = res.tempFilePaths[0];
						// let avatar = res.tempFiles;
						console.log("src:",avatar)
						let now_time = new Date().getTime();
						uni.uploadFile({
							url: 'https://up-z2.qiniup.com', 
							filePath: avatar,
							name: 'file',
							formData: {
								'key': now_time,
								'token': this.qiniu.token,
							},
							success: (uploadFileRes) => {
								let uploadImgUrl = JSON.parse(uploadFileRes.data).key;
								let backUrl = that.qiniu.domain + '/' +uploadImgUrl;
								that[key] = backUrl;
								that.$set(that,key,backUrl)
								console.log(key,this[key])
								uni.hideLoading();
							},
							fail: (error) => {
								console.log(error);
								uni.hideLoading();
							},
							complete: () => {
								setTimeout(function() {
									uni.hideLoading();
								}, 250);
							},
						});
					},
					fail: function() {
						console.log('上传图片接口调用失败');
						uni.hideLoading();
						return;
					}
				});
				uni.hideLoading();
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-icon__icon{
		font-size: 43rpx !important;
		padding: 12rpx 0 0 0;
	}
	/deep/.u-upload__deletable{
		width: 50rpx !important;
		height: 50rpx !important;
	}
	.useridcomfrim-container {
		width: 100%;
		height: 100vh;
		background: #F4F4F4;
		padding-bottom: 40rpx;

		.usermsg-input {
			width: 100%;
			// height: 96rpx;
			background: #FFFFFF;
			// margin: 30rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.usermsg-input-nameblock {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 24rpx 0;

				.usermsg-input-nametitle {
					flex: .6;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333;
					// margin-left: 40rpx;
				}

				.usernameinput {
					flex: 1.5;
					margin-right: 40rpx;
					color: #000;
				}

			}

			.usermsg-input-idblock {
				display: flex;
				align-items: center;
				padding: 24rpx 0;

				.usermsg-input-idtitle {
					flex: .6;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333;
					// margin-left: 40rpx;
				}

				.useridinput {
					flex: 1.5;
					margin-right: 40rpx;
				}
			}
		}

		.use-upload-content {
			width: 92%;
			margin: auto;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin-top: 32rpx;
			padding: 40rpx 32rpx;
			padding-bottom: 10rpx;
			.user-image-upload-title-block {
				display: flex;
				flex-direction: column;
				// margin-left: 40rpx;
				padding-top: 40rpx;

				.user-image-upload-title {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333;
				}

				.user-image-upload-tips {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #EE3A33;
					margin-top: 26rpx;
				}
			}

			.upload-box{
				// @include flexBetween;
				margin: 40rpx auto;
				.upload{
					width: 492rpx;
					height: 300rpx;
					position: relative;
				}
				.close{
					position: absolute;
					top: 0;
					right: 0;
					width: 40rpx;
					height: 40rpx;
				}
				.img{
					width: 492rpx;
					height: 100%;
				}
			}

			.useridconfrim-deal-block {
				display: flex;
				align-items: center;
				margin: 40rpx 0;
				// margin-left: 40rpx;
				.ico{
					width: 31rpx; 
					height: 31rpx; 
					margin-right: 18rpx;
				}
				.useridconfrim-deal-text {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #232323;

					.deal-text {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #EE3A33;
					}
				}
			}

		}
	}
	.usermsg-upload-btn {
				width: 92%;
				margin: auto;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				background: #EE3A33;
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				color: #fff;
				margin-top: 60rpx;
			}
	.usermsg-upload-cancel{
		font-size: 34rpx;
		background: #EE3A33;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-align: center;
		margin-top: 48rpx;
	}

	// 认证结果
	.result{
		width: 100%;
		height: 100vh;
		background: #fff;
		text-align: center;
		overflow: hidden;
		.img-box{
			width: 654rpx;
			height: 468rpx;
			margin: auto;
			margin-top: 96rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.title{
				margin-top: -40rpx;
				font-size: 40rpx;
				color: #000000;
				line-height: 56rpx;
			}
			.close{
				width: 320rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin: auto;
				margin-top:32rpx;
				border-radius: 80rpx;
				border: 2rpx solid;
				border-image:#EE3A33;
				border:2rpx solid #EE3A33;
				font-size: 34rpx;
				background: #EE3A33;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
	}
	.remark{
		background: #EE3A33;
		color: #FFFFFF;
		padding: 20rpx;
		margin: auto;
	}
</style>
